<template>
    <div class="page">
        <div class="btn">
            <div class="adduser">
                <el-button type="primary" @click="add">添加角色</el-button>
            </div>
        </div>
          <!-- 组件 adduser-->
         <adduser ref="adduserLink" @over="over"></adduser>

        <div class="table">
            <el-table :data="tableData" border style="width: 100%" row-key="id">
                <el-table-column type="expand">
                    <template #default="props">
                    <!-- 渲染每个角色权限列表 -->
                    <!-- {{props.row}} -->
                    <!-- 渲染一级权限 -->
                    <el-row v-for="(item,index) in props.row.children" :key="index" class="myrow">
                        <el-col :span="5">
                        <!-- 一级权限tag -->
                         <el-tag size="large" closable @close="removeTag(props.row.id,item.id,props.row)">{{item.authName}}</el-tag><el-icon><CaretRight /></el-icon>
                        </el-col>
                        <el-col :span="19">
                        <!-- 渲染二级权限 -->
                           <el-row v-for="(item1,index1) in item.children" :key="index1" class="myrow2">
                             <el-col :span="5">
                              <!-- 二级权限tag -->
                         <el-tag size="large" type="success" closable @close="removeTag(props.row.id,item1.id,props.row)">{{item1.authName}}</el-tag><el-icon><CaretRight /></el-icon>
                             </el-col>
                             <el-col :span="19">
                             <!-- 渲染三级权限 -->
                                     <el-tag size="large" closable v-for="(item2,index2) in item1.children" :key="index2" class="mytag" type="warning" @close="removeTag(props.row.id,item2.id,props.row)">{{item2.authName}}</el-tag>
                             </el-col>
                           </el-row>
                        </el-col>
                    </el-row>
                    </template>
                </el-table-column>
                <el-table-column label="角色id" prop="id" />
                <el-table-column label="角色名称" prop="roleName" />
                <el-table-column label="角色描述" prop="roleDesc" />
                <el-table-column label="操作">
                    <template #default = 'scope'>
                        <div>
                            <el-button type="primary" size="small">
                                编辑
                             </el-button>
                             <el-button type="danger" size="small" @click = 'delerole(scope.row.id)'>
                                删除
                             </el-button>
                             <el-button type="warning" size="small" @click="set(scope.row.children,scope.row.id)">
                                分配角色
                             </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        
        <setRoles ref="setRolesRef" @over="getList"></setRoles>

       
    </div>
</template>
<script setup>
import { ref } from 'vue';
import {getRoleList,removeTagRole,deleteRole} from '../../api/role.js';
import { CaretRight} from '@element-plus/icons-vue'
import setRoles from './components/setroles.vue'
//引入添加角色组件
import adduser from "./components/adduser.vue"
let adduserLink = ref(null);

let tableData = ref([]);
let getList = async ()=>{
    let res = await getRoleList();
    console.log(res)
    tableData.value = res.data.data
}
getList();
// 删除指定权限
let removeTag = async (roleId,rightId,row)=>{
    let res = await removeTagRole(roleId,rightId);
    console.log(res)
    console.log(row)
    row.children = res.data.data;
}
let setRolesRef = ref(null);
// 分配角色
let set = (children,id)=>{
    // 调用子组件中的初始化方法
    setRolesRef.value.init(children,id);
}

//添加用户
let add = ()=>{
  adduserLink.value.init();
}

let over = () => {
  getList();
}

let  delerole = async (id)=>{
  let res = await deleteRole(id)
  console.log(res);
  console.log(111111111111111111);
  getList();
}
</script>
<style scoped>
.myrow{
    padding: 10px 10px;
    border-bottom: 1px solid #f1f1f1;
}
.myrow2{
    margin-bottom: 10px;
}
.mytag{
    margin-right: 10px;
    margin-bottom: 10px;
}
</style>